<template>
	<view class="notice_card">
		<view class="item" @tap="toPage(url,isTo)">
			<image :src="ico" mode="" class="avatar"></image>
			<view class="cont">
				<view class="top">
					<view class="name">{{title}}</view>
					<view class="time">{{time}}</view>
				</view>
				<view class="des u-line-1">{{des}}</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="8" closeable>
			<view class="showCard">
				<view class="user">
					<image src="../static/image/ico/jyxx.png" mode="" class="avatar"></image>
					<view class="name">Lee Yan</view>
					<view class="job_title">
						<text>支付宝  高级UI设计师</text>
					</view>
				</view>
				<view class="cont">
					<view class="item">
						<view class="left">
							<text class="title">电话</text>
							<text> 150 333 2223</text>
						</view>
						<text @tap="copy()">复制</text>
					</view>
					<view class="item">
						<view class="left">
							<text class="title">微信</text>
							<text>bello_dfg</text>
						</view>
						<text @tap="copy()">复制</text>
					</view>
					<view class="item">
						<view class="left">
							<text class="title">邮箱</text>
							<text> abc@qq.com</text>
						</view>
						<text @tap="copy()">复制</text>
					</view>
				</view>
				<view class="goTo">访问个人主页</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		props:{
			isTo:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			title: {
				type: String,
				default: ''
			},
			ico:{
				type:String,
				default:''
			},
			time:{
				type:String,
				default:''
			},
			des:{
				type:String,
				default:''
			},
			url:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				show:false
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			//复制
			copy(data){
				uni.setClipboardData({
				    data:data,
				    success: function () {
				        console.log('[复制成功]');
				    }
				});
			},
			// 跳转
			toPage(url,isTo=false){
				if(isTo){
					this.show = true
					return
				}
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice_card{
		.item{
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #E6E6E6;
			image{
				width: 95rpx;
				height: 95rpx;
				border-radius: 50%;
			}
			.cont{
				width: calc(100% - 95rpx);
				margin-left: 30rpx;
				.top{
					display: flex;
					justify-content:space-between;
					align-items: center;
					.name{
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 32rpx;
					}
					.time{
						font-size: 22rpx;
						font-weight: 400;
						color: #AEAEAE;
						line-height: 30rpx;
					}
				}
				.des{
					font-size: 28rpx;
					font-weight: 400;
					color: #888888;
					line-height: 40rpx;
					margin-top: 17rpx;
				}
			}
		}
		.showCard{
			width: calc(100vw - 60rpx);
			padding: 60rpx 20rpx 45rpx 20rpx;
			.user{
				text-align: center;
				.avatar{
					width: 95rpx;
					height: 95rpx;
					border-radius: 50rpx;
				}
				.name{
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 34rpx;
					margin-top: 15rpx;
				}
				.job_title{
					margin-top: 15rpx;
					text{
						background: url(../static/image/ico/renzheng.png)left center no-repeat;
						background-size: 30rpx 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
						padding-left: 45rpx;
					}
				}
			}
			.cont{
				margin-top: 66rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					text:last-child{
						font-size: 24rpx;
						color: #4A90E2;
						line-height: 29rpx;
					}
					.left{
						text{
							font-size: 28rpx;
							color: #4C4C4C;
							line-height: 34rpx;
						}
						.title{
							color: #AEAEAE;
							margin-right: 20rpx;
						}
					}
				}
				.item:last-child{
					border-bottom: 0;
				}
			}
			.goTo{
				padding-top: 25rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #4A90E2;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
	
</style>
